<template>
  <div ref="page" class="page">
    <div ref="animatedDiv" class="container">
      Hello World
    </div>
    <div class="section">
      dom2
    </div>
    <div class="section">
      dom3
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';

const animatedDiv = ref<HTMLElement | null>(null);
const page = ref<HTMLElement | null>(null);
const handleScroll = () => {
  if (animatedDiv.value) {
    const scrollTop = window.scrollY;
    const maxScroll = 800; // 最大滚动距离
    const minHeight = 56; // 最小高度
    const maxHeight = 800; // 最大高度
    const minWidth = 1200; // 最小宽度
    const maxWidth = window.innerWidth; // 最大宽度
    const maxBorderRadius = 20; // 最大圆角
    const maxTop = 20; // 最大top
    // 获取滚动条宽度
    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
    // 计算新的高度和宽度
    const newHeight = Math.max(minHeight,maxHeight - (scrollTop / maxScroll) * (maxHeight - minHeight)*1.5);
    let newWidth = Math.max(minWidth,maxWidth - (scrollTop / maxScroll) * (maxWidth - minWidth));
    if(newWidth>maxWidth-scrollBarWidth){
      newWidth = maxWidth-scrollBarWidth;
    }
    const borderRudius =  (1 - newHeight/maxHeight)*maxBorderRadius;
    const newTop = (1 - newHeight/maxHeight)*maxTop;
    // 应用新的高度和宽度
    animatedDiv.value.style.height = `${newHeight}px`;
    animatedDiv.value.style.width = `${newWidth}px`;
    animatedDiv.value.style.borderRadius = `${borderRudius}px`;
    animatedDiv.value.style.top = `${newTop}px`;
  }
};
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 800px;
  background-color: lightblue;
  position: fixed;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.3s ease, height 0.3s ease;
}
.section {
  height: 800px;
  background-color: lightcoral;
}
.page{
  padding-top: 800px;
  background: #080a27;
}
</style>